<script setup>
import * as echarts from 'echarts';
import { ref } from "vue";
import { getBasicInfoApi } from '@/apis/user'
import { showToast } from 'vant';

const props = defineProps({
    overview_id: Number
})

// 基本情况数据
const baseInfo = ref({})
// 饼图数据
let pieData = ref([])

const getBasicInfo = async () => {
    const res = await getBasicInfoApi(props.overview_id)
    // console.log(res);
    if (res.data.code === 200) {
        baseInfo.value = res.data.data.info
        pieData.value = res.data.data.info.base_material.detail
    } else {
        showToast(res.data.msg)
    }
}
getBasicInfo()

// 产能
const currentRate = ref(0)

const gradientColor = {
    '0%': '#6D37F7',
    '100%': '#7ad1f5',

};

// 基材信息 绘制饼图
const drawPie = () => {
    var chartDom = document.getElementById('piebox');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        textStyle: {
            color: '#000000',
            textBorderColor: '#000000',
            fontSize: 25,
        },
        tooltip: {
            trigger: 'item',
            position: 'inside',
        },
        series: [
            {
                type: 'pie',
                width: 350,
                height: 350,
                left: 'center',
                top: '-20%',
                radius: '50%',
                color: ['#DF3D34', '#E56639', '#EF9640', '#EDDC53', '#80A445', '#307943', '#2A6496', '#393C87', '#623381', '#8C317E', '#C33275'],
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 2,
                },
                label: {
                    show: true,
                    // position: 'inner',
                    color: '#000000',
                    fontSize: 25,
                    fontWeight: 'bold',
                    width: 120,
                },
                labelLine: {
                    length: 20,
                    length2: 50,
                    lineStyle: {
                        color: '#004d91',
                        opacity: 1
                    }
                },
                // data: [
                //     { value: 40, name: '冷轧板' },
                //     { value: 25, name: '热轧板' },
                //     { value: 40, name: '镀锌板' },
                //     { value: 40, name: '铝合金' },
                //     { value: 70, name: '不锈钢' },
                //     { value: 60, name: '镁合金' },
                //     { value: 50, name: '铸铁' },
                //     { value: 40, name: '碳钢' },
                //     { value: 30, name: '铸铝' },
                //     { value: 25, name: '合金钢' },
                //     { value: 50, name: '铜' },
                // ],
                data: pieData.value, // 饼图数据
                emphasis: {
                    itemStyle: {
                        shadowBlur: 1,
                        shadowOffsetX: 2,
                        shadowColor: 'rgba(0, 0, 0, 0.1)'
                    },
                }
            }
        ]
    };

    option && myChart.setOption(option);
}

// 暴露给父组件调用
defineExpose({
    drawPie
})
</script>

<template>
    <div class="primarybox clmstart">
        <!-- 产能 -->
        <div class="pitem channengbox">
            <p class="ptitle">Capacity</p>
            <div class="channengdays">
                {{ baseInfo?.production_cap?.cr8c4_capacity }}m<sup>2</sup>/day
            </div>
            <div class="circlebox clmcenter">
                <van-circle v-model:current-rate="currentRate" :rate="75" :speed="100" :color="gradientColor"
                    size="94px" :stroke-width="58" :clockwise="false" />
            </div>
            <div class="worksbox">
                <p class="wtitle">Production state</p>
                <p class="winfo">{{ baseInfo?.production_cap?.cr8c4_production_state }}</p>
            </div>
        </div>
        <!-- 基材信息 -->
        <div class="pitem jicaibox">
            <p class="ptitle">Substrate</p>
            <div id="piebox" ref="piebox"></div>
            <div class="piebg"></div>
            <div class="tips">
                <p class="t1">Surface condition:</p>
                <p class="t2">{{ baseInfo?.base_material?.cr8c4_surfacecondition }}</p>
            </div>
        </div>
        <!-- 水质信息 -->
        <div class="pitem shuizhibox">
            <p class="ptitle">Water Quality</p>
            <div class="sziconbox clmcenter">
                <p>{{ baseInfo?.water_quality?.cr8c4_di_water_capacity.indexOf('tons/hour') != -1 ?
                    baseInfo?.water_quality?.cr8c4_di_water_capacity :
                    baseInfo?.water_quality?.cr8c4_di_water_capacity + 'tons/hour' }}</p>
                <img src="@/assets/img/icon_shuizhi.png" class="icon_shuizhi">
            </div>
            <img src="@/assets/img/line_shuizhi.png" class="line_shuizhi" />
            <div class="szinfo">
                <p>Dl water production: <span>{{ baseInfo?.water_quality?.cr8c4_di_water_capacity.indexOf('tons/hour')
                    != -1 ?
                    baseInfo?.water_quality?.cr8c4_di_water_capacity :
                    baseInfo?.water_quality?.cr8c4_di_water_capacity + 'tons/hour' }}</span></p>
                <p>Tap water conducivity: <span>{{ baseInfo?.water_quality?.new_tap_water_quality_ddl }}us/cm</span></p>
                <p>Dl water conductivity: <span>{{ baseInfo?.water_quality?.new_di_water_quality_ddl }}us/cm</span></p>
                <p>DI Water Manufacturer: <span>{{ baseInfo?.water_quality?.di_water_system_manufacturer }}</span></p>
            </div>
        </div>
        <!-- 前处理线 -->
        <div class="pitem qclxbox">
            <p class="ptitle">Pretreatment line</p>
            <div class="qclxinfo">
                <p>Equipment Manufacturer: <span>{{ baseInfo?.pre_process_line?.cr8c4_equipment_manufacturer }}</span>
                </p>
                <p>Convey type: <span>{{ baseInfo?.pre_process_line?.cr8c4_convey_type }}</span></p>
                <p>Chain speed: <span>{{ baseInfo?.pre_process_line?.cr8c4_chain_speed }}</span></p>
            </div>
        </div>
        <!-- 后道工序 -->
        <div class="pitem hdgxbox">
            <p class="ptitle">Subsequent processes</p>
            <div class="hdgxinfo">
                <div class="hitem" v-if="baseInfo?.subsequent_process?.new_nextprocess_category">
                    <div class="gname clmcenter">{{
                        baseInfo?.subsequent_process?.new_nextprocess_category.length > 7 ?
                            baseInfo?.subsequent_process?.new_nextprocess_category.substring(0, 7) + '-' +
                            baseInfo?.subsequent_process?.new_nextprocess_category.substring(7,
                                baseInfo?.subsequent_process?.new_nextprocess_category.length) :
                            baseInfo?.subsequent_process?.new_nextprocess_category
                    }}</div>
                    <div class="gline">
                        <div class="gtxt">
                            <p>{{ baseInfo?.subsequent_process?.new_nextprocess_supplier }}</p>
                            <p>{{ baseInfo?.subsequent_process?.new_nextprocess_namel }}</p>
                        </div>
                        <img src="@/assets/img/line_hdgx.png" class="line_hdgx" />
                    </div>
                    <div class="gtimes">
                        <div class="times">{{ baseInfo?.subsequent_process?.new_nextprocess_time }}<span>min</span>
                        </div>
                        <div class="temps">
                            <img src="@/assets/img/temp_2.png" class="icon_temp" />
                            <span class="temp">{{ baseInfo?.subsequent_process?.new_nextprocess_temperature }}℃</span>
                        </div>
                    </div>
                </div>
                <div class="hitem" v-if="baseInfo?.subsequent_process?.new_nextprocess_o_category2">
                    <div class="gname clmcenter">{{ baseInfo?.subsequent_process?.new_nextprocess_o_category }}</div>
                    <div class="gline">
                        <div class="gtxt">
                            <p>{{ baseInfo?.subsequent_process?.new_nextprocess_o_supplier }}</p>
                            <p>{{ baseInfo?.subsequent_process?.new_nextprocess_o_namel }}</p>
                        </div>
                        <img src="@/assets/img/line_hdgx.png" class="line_hdgx" />
                    </div>
                    <div class="gtimes">
                        <div class="times">{{ baseInfo?.subsequent_process?.new_nextprocess_o_time }}<span>min</span>
                        </div>
                        <div class="temps">
                            <img src="@/assets/img/temp_2.png" class="icon_temp" />
                            <span class="temp">{{ baseInfo?.subsequent_process?.new_nextprocess_o_temperature }}℃</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 环保要求 -->
        <div class="pitem huanbaobox">
            <p class="ptitle">Environmental Requirements</p>
            <div class="huanbaoinfo">
                <p class="pfyq">Emission requirements:</p>
                <div class="yuansubox">
                    <div class="yitem">
                        <div class="ysiconbox">
                            <img src="@/assets/img/icon_p.png" class="yicon" />
                            <!-- <span class="yname">磷</span> -->
                        </div>
                        <div class="ytext">
                            <p>Specific emission requirements: {{
                                baseInfo?.env_require?.cr8c4_emission_requirements_pfree }}</p>
                        </div>
                    </div>
                    <div class="yitem">
                        <div class="ysiconbox">
                            <img src="@/assets/img/icon_n.png" class="yicon" />
                            <!-- <p class="yname">氮</p> -->
                        </div>
                        <div class="ytext">
                            <p>Specific emission requirements: {{
                                baseInfo?.env_require?.cr8c4_emission_requirements_nfree }}</p>
                        </div>
                    </div>
                    <div class="yitem">
                        <div class="ysiconbox">
                            <img src="@/assets/img/icon_f.png" class="yicon" />
                            <!-- <p class="yname">氟</p> -->
                        </div>
                        <div class="ytext">
                            <p>Specific emission requirements: {{
                                baseInfo?.env_require?.cr8c4_emission_requirements_ffree }}</p>
                        </div>
                    </div>
                    <div class="yitem">
                        <div class="ysiconbox">
                            <img src="@/assets/img/icon_ni.png" class="yicon" />
                            <!-- <p class="yname">镍</p> -->
                        </div>
                        <div class="ytext">
                            <p>Specific emission requirements: {{
                                baseInfo?.env_require?.cr8c4_emission_requirements_nickelfree }}</p>
                        </div>
                    </div>
                    <div class="yitem">
                        <div class="ysiconbox">
                            <img src="@/assets/img/icon_mn.png" class="yicon" />
                            <!-- <p class="yname">锰</p> -->
                        </div>
                        <div class="ytext">
                            <p>Specific emission requirements: {{
                                baseInfo?.env_require?.new_emission_requirements_mnfree }}</p>
                        </div>
                    </div>
                </div>
                <div class="hbothers">
                    <div class="otitle">Other</div>
                    <div class="otxt">{{ baseInfo?.env_require?.cr8c4_emission_requirements_others }}</div>
                </div>
                <div class="feishui">
                    <p class="fs1">Waste water equipment:</p>
                    <p class="fs2">{{ baseInfo?.env_require?.cr8c4_waste_water_treatment_equipment_pfree }}</p>
                </div>
            </div>
        </div>
        <!-- 检测水平 -->
        <div class="pitem jiancebox">
            <p class="ptitle">Testing Capacity</p>
            <div class="jianceinfo">
                <p class="jtitle">Equipment:</p>
                <p class="jdesc">{{ baseInfo?.testing_level?.new_lab_detection }}</p>
                <p class="jtitle">Responsible staff:</p>
                <p class="jdesc">{{ baseInfo?.testing_level?.new_lab_personnal }}</p>
            </div>
        </div>
        <!-- 性能要求 -->
        <div class="pitem xingnengbox">
            <p class="ptitle">Performance Requirements</p>
            <div class="xingnenginfo" v-if="baseInfo?.performance_require?.new_segment3 !== 'ECT COLD FORMING'">
                <p class="xntitle">Common requirements</p>
                <div class="xnitem">
                    <p>NSST： {{ baseInfo?.performance_require?.cr8c4_nsst }}</p>
                    <p>SST： {{ baseInfo?.performance_require?.cr8c4_sst }}</p>
                    <p>CASS： {{ baseInfo?.performance_require?.cr8c4_cass }}</p>
                    <p>Filiform test： {{ baseInfo?.performance_require?.cr8c4_cyclic_corrosion_experiment }}</p>
                    <p>Water resistance: {{ baseInfo?.performance_require?.cr8c4_water_resistance }}</p>
                    <p>Others：{{ baseInfo?.performance_require?.cr8c4_performance_requirements_others }}</p>
                </div>
                <p class="xntitle tucengtitle">Coating performance </p>
                <div class="xnitem">
                    <p>Chip： {{ baseInfo?.performance_require?.new_performance_requirements_stoning }}</p>
                    <p>Cupping： {{ baseInfo?.performance_require?.new_performance_requirements_cupprocess }}</p>
                    <p>Adhesion： {{ baseInfo?.performance_require?.new_performance_requirements_adhesiveforce }}</p>
                    <p>Others：{{ baseInfo?.performance_require?.cr8c4_coating_performance_test }} </p>
                </div>
            </div>
            <div class="xingnenginfo" v-else>
                <p class="xntitle">Common requirements</p>
                <div class="xnitem">
                    <p>Corrosion pit： {{ baseInfo?.performance_require?.new_xnyq_corrosionpit }}</p>
                    <p>Grain size： {{ baseInfo?.performance_require?.new_xnyq_grainsize }}</p>
                    <p>Coating weight/thickness： {{ baseInfo?.performance_require?.new_xnyq_thickness }}</p>
                    <p>Antirust period： {{ baseInfo?.performance_require?.new_xnyq_antirustperiod }}</p>
                    <p>Coefficient of friction： {{ baseInfo?.performance_require?.new_xnyq_coefficientoffriction }}</p>
                    <p>Cleanness：{{ baseInfo?.performance_require?.new_xnyq_cleanness }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.primarybox {
    position: relative;
    width: 582px;
    margin: 68px auto 30px;
    font-family: 'Helvetica';
    .pitem {
        position: relative;
        width: 582px;
        border: 1px solid #004d91;
        box-sizing: border-box;
        border-radius: 13px;
        margin-bottom: 68px;
        font-size: 1.78rem;
        font-weight: bold;
        .ptitle {
            position: absolute;
            top: -10px;
            left: 16px;
            font-weight: bold;
            color: #004d91;
            background: url('@/assets/img/bg.jpg') repeat;
            background-size: 20px 20px;
            padding: 0 8px 0 5px;
        }
    }
    .pitem:last-child {
        margin-bottom: 0;
    }
    // 产能
    .channengbox {
        min-height: 134px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 16px 0;
        .channengdays {
            position: relative;
            z-index: 2;
            width: 256px;
            height: 47px;
            background: url('@/assets/img/line_channeng.png') no-repeat;
            background-size: 100% 100%;
            margin-left: 36px;
            margin-bottom: 46px;
            // padding-right: 49px;
            padding-top: 6px;
        }
        .circlebox {
            position: relative;
            width: 99px;
            height: 99px;
            background: url('@/assets/img/icon_channeng.png') no-repeat;
            background-size: 100% 100%;
            margin-left: -49px;
        }
        .worksbox {
            flex: 1;
            margin: 0 19px;
            text-align: left;
            .wtitle {
                color: #004d91;
                font-weight: bold;
                line-height: 1.8;
            }
            .winfo {
                color: #000000;
                font-weight: 500;
                line-height: 1.3;
            }
        }
    }
    // 基材信息
    .jicaibox {
        position: relative;
        width: 582px;
        min-height: 300px;
        border: 1px solid #004d91;
        box-sizing: border-box;
        border-radius: 13px;
        #piebox {
            position: relative;
            z-index: 2;
            width: 582px;
            height: 300px;
            margin-top: 40px;
        }
        .piebg {
            position: absolute;
            z-index: 1;
            top: 15%;
            left: 33.5%;
            width: 193px;
            height: 193px;
            border-radius: 50%;
            background-color: #ffffff;
        }
        .tips {
            padding: 0 16px;
            margin-top: -35px;
            margin-bottom: 20px;
            p {
                color: #000;
                text-align: left;
                line-height: 1.4;
                font-weight: normal;
            }
            .t1 {
                font-weight: bold;
            }
        }
    }
    // 水质信息
    .shuizhibox {
        min-height: 185px;
        padding: 1.8rem 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .sziconbox {
            position: relative;
            width: 140px;
            height: 140px;
            margin-top: 10px;
            margin-left: 12px;
            .icon_shuizhi {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                filter: drop-shadow(0px 2px 6px rgba($color: #B8A3FC, $alpha: 0.4));
            }
            p {
                color: #ffffff;
                position: relative;
                z-index: 2;
                font-weight: 500;
                text-shadow: rgba($color: #172d57, $alpha: 0.59) 0px 2px 0px;
            }
        }
        .line_shuizhi {
            width: 90px;
            margin-bottom: 50px;
        }
        .szinfo {
            flex: 1;
            margin-left: 16px;
            text-align: left;
            p {
                color: #000000;
                padding-bottom: 1.2rem;
                font-weight: bold;
                span {
                    font-weight: normal;
                }
            }
            p:last-child {
                padding-bottom: 0;
                line-height: 1.4;
                padding-right: 0.5rem;
            }
        }
    }
    // 前处理线
    .qclxbox {
        min-height: 130px;
        .qclxinfo {
            padding: 32px 20px 18px;
            text-align: left;
            p {
                color: #000000;
                padding-bottom: 1rem;
                font-weight: bold;
                span {
                    font-weight: normal;
                }
            }
            p:last-child {
                padding-bottom: 0;
            }
        }
    }
    // 后道工序
    .hdgxbox {
        min-height: 130px;
        .hdgxinfo {
            padding: 45px 17px;
            text-align: left;
            .hitem {
                margin-bottom: 22px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .gname {
                    width: 99px;
                    height: 99px;
                    background: url('@/assets/img/icon_hdgx.png') no-repeat center;
                    background-size: 100% 100%;
                    font-weight: bold;
                    color: #000000;
                    text-align: center;
                    word-wrap: break-word;
                    white-space: nowrap;
                }
                .gline {
                    position: relative;
                    width: 251px;
                    height: 12px;
                    .gtxt {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        p {
                            color: #000000;
                            line-height: 1.3;
                        }
                    }
                    .line_hdgx {
                        width: 100%;
                    }
                }
                .gtimes {
                    display: flex;
                    color: #004d91;
                    font-weight: 500;
                    .times {
                        width: 76px;
                        height: 76px;
                        background: url('@/assets/img/time_fy2.png') no-repeat center;
                        background-size: 100% 100%;
                        text-align: center;
                        line-height: 76px;
                        span {
                            font-size: 1rem;
                        }
                    }
                    .temps {
                        margin-left: 10px;
                        .icon_temp {
                            width: 25px;
                        }
                    }
                }
            }
            .hitem:last-child {
                margin-bottom: 0;
            }
        }
    }
    // 环保要求
    .huanbaobox {
        .huanbaoinfo {
            padding: 24px 18px;
            text-align: left;
            color: #000000;
            .pfyq {
                padding-top: 1rem;
            }
            .yuansubox {
                margin-top: 22px;
                .yitem {
                    width: 542px;
                    min-height: 74px;
                    margin-bottom: 19px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    border: 3px solid transparent;
                    box-sizing: border-box;
                    background-clip: padding-box, border-box;
                    background-origin: padding-box, border-box;
                    background-image: linear-gradient(#d5dbf3, #d5dbf3), linear-gradient(to right, #5468f6 0%, #5d90e3 80%);
                    border-top-left-radius: 41px;
                    border-bottom-left-radius: 41px;
                    .ysiconbox {
                        width: 108px;
                        height: 76px;
                        background: url('../../assets/img/ysbg.png') no-repeat;
                        background-size: 100% 100%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-left: -1px;
                        margin-top: -1px;
                        .yicon {
                            width: 56px;
                            height: 56px;
                            margin-left: 18px;
                        }
                        .yname {
                            color: #ffffff;
                            font-weight: 500;
                            padding-left: 3px;
                        }
                    }
                    .ytext {
                        flex: 1;
                        min-height: 73px;
                        padding-left: 15px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        font-weight: normal;
                        p {
                            line-height: 1.4;
                        }
                    }
                }
            }
            .hbothers {
                margin-top: 42px;
                display: flex;
                .otitle {
                    width: 80px;
                    height: 33px;
                    border-radius: 16px;
                    background-color: #5468f6;
                    line-height: 33px;
                    color: #ffffff;
                    text-align: center;
                    font-weight: bold;
                }
                .otxt {
                    flex: 1;
                    margin-left: 7px;
                    border: 3px solid transparent;
                    box-sizing: border-box;
                    background-clip: padding-box, border-box;
                    background-origin: padding-box, border-box;
                    background-image: linear-gradient(#d5dbf3, #d5dbf3), linear-gradient(to right, #5468f6 0%, #5d90e3 80%);
                    //border-radius: 35px;
                    padding: 10px;
                    background-color: #d5dbf3;
                    min-height: 33px;
                    line-height: 1.2;
                    font-weight: normal;
                }
            }
            .feishui {
                margin-top: 20px;
                p {
                    line-height: 1.4;
                }
                .fs1 {
                    font-weight: bold;
                }
                .fs2 {
                    font-weight: normal;
                }
            }
        }
    }
    // 检测水平
    .jiancebox {
        .jianceinfo {
            width: 100%;
            padding: 35px 18px 25px;
            text-align: left;
            p {
                width: 100%;
                line-height: 1.5;
                word-break: break-all;
            }
            .jtitle {
                font-weight: bold;
            }
            .jdesc {
                font-weight: normal;
            }
        }
    }
    // 性能要求
    .xingnengbox {
        .xingnenginfo {
            padding: 25px 14px;
            text-align: left;
            width: 100%;
            .xntitle {
                line-height: 1.3;
                font-weight: bold;
            }
            .tucengtitle {
                padding-top: 20px;
            }
            .xnitem {
                width: 100%;
                font-weight: normal;
                p {
                    line-height: 1.6;
                }
            }
        }
    }
}
</style>